<template>
  <div class="detail">
    <van-nav-bar title="专家问诊" left-arrow @click-left="onClickLeft" />
    <div class="box">
      <!-- 顶部 -->
      <div class="box1">
        <div class="box1_1" style="border: 1px solid greenyellow">
          <img
            src="https://img2.baidu.com/it/u=3214833245,1207781532&fm=253&app=120&size=w931&n=0&f=JPEG&fmt=auto?sec=1729875600&t=15cb211519f439e3a6e5ded9347ed89d"
            alt="" /><span>已真人认证</span>
        </div>
        <p>身份证号:{{ getData?.id?.slice(0, 4) }}*********{{ getData?.id?.slice(14, 18) }}</p>
      </div>

      <div class="box2">
        <div class="box2_1">
          <dl>
            <dt class="box2_1_name">{{ getData.name }}</dt>
            <dd>
              <van-button :type="getData.states ? 'default' : 'success'" class="guanzhu" @click="guanzhu">{{
                getData.states ? '已关注' : '关注' }}</van-button>
            </dd>
          </dl>
        </div>

        <div class="box2_2">
          <p>
            {{ getData.doctor }}<span>&nbsp;&nbsp;{{ getData.department }}</span>
          </p>
          <p class="box2_2_p">
            地址：{{ getData.city }}&nbsp;&nbsp; <span class="jia">医院:{{ getData.wound }}</span><van-icon name="arrow" />
          </p>
        </div>

        <div class="box2_3">
          <img :src="getData.image" alt="" />
          <p><img src="https://kano.guahao.com/jG7377392069?webp=80" alt="" />在线</p>
        </div>
        <div class="box2_4">
          <dl>
            <dt>接诊率:</dt>
            &nbsp;
            <dd>{{ getData.comment % 100 }}%</dd>
          </dl>
          <dl>
            <dt>就诊次数:</dt>
            &nbsp;
            <dd>{{ getData.patient }}</dd>
          </dl>
          <dl>
            <dt>1小时内</dt>
            &nbsp;
            <dd>平均回复</dd>
          </dl>
        </div>
      </div>
      <div class="box3">
        <div><img src="https://kano.guahao.com/UH8461438237" />开通VIP享 问诊4折起 一单回本</div>
        <button>29元起</button>
      </div>
      <div class="box4">
        <dl>
          <dt><img src="https://kano.guahao.com/jdF163518357?webp=80" alt="" /></dt>
          &nbsp;
          <dd>保证医生真实</dd>
        </dl>
        <dl>
          <dt><img src="https://kano.guahao.com/ejy163518435?webp=80" alt="" /></dt>
          &nbsp;
          <dd>未使用随时退</dd>
        </dl>
        <dl>
          <dt><img src="https://kano.guahao.com/u3U163518598?webp=80" alt="" /></dt>
          &nbsp;
          <dd>不满意可申诉</dd>
        </dl>
      </div>
      <div class="box6">
        <h3>
          患者评价&nbsp;
          <!-- 患者评论总条数 -->
          <span>{{ messages.length }}</span>
          <span class="span1" @click="$router.push('/pinglun')">查看全部<van-icon name="arrow" /></span>
        </h3>
        <br />
        <div class="box6_1" @click="$router.push('/pinglun')" v-for="(item, index) in messages" :key="index">
          <dl>
            <dt>
              <img v-lazy="item.avatar" alt="" />
            </dt>
            <dd>
              <p>
                {{ item.name }}&nbsp;{{ item.time }} 问诊<van-rate v-model="value" disabled disabled-color="#ffca0c"
                  size="14px" />
              </p>
              <br />
              <p style="overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;">
                {{ item.content }}
              </p>
              <br />
              <p>{{ item.help }}</p>
            </dd>
          </dl>
        </div>
      </div>
    </div>
  </div>
</template>
<script setup lang="ts">
import axios from '../../utils/request'
import { useRoute, useRouter } from 'vue-router'
import { onMounted, ref } from 'vue'

const onClickLeft = () => history.back()

const router = useRoute()
const { id } = router.params
const getData: any = ref({})
const value = ref(5)

// 数据
const getDoctorInfo = async () => {
  const res = await axios.get('/api/v1/detail', { params: { id: id } })
  getData.value = res.data.data
  if (getData.value) {
    const storedState = JSON.parse(localStorage.getItem(`guan_${getData.value.id}`) || '{}') || {
      states: false
    }
    getData.value.states = storedState.states
  }
  console.log(getData.value)
}
getDoctorInfo()

//切换关注状态
const guanzhu = () => {
  if (getData.value) {
    // 切换关注状态
    getData.value.states = !getData.value.states
    // 更新本地存储
    if (getData.value.states) {
      localStorage.setItem(`guan_${getData.value.id}`, JSON.stringify(getData.value))
    } else {
      localStorage.removeItem(`guan_${getData.value.id}`)
    }
  }
  //路由跳转
}
// 评论
const messages: any = ref([])
const MessAgeList = async () => {
  const res = await axios.get(`/api/v1/commentList`)
  console.log(res.data.data)
  messages.value = res.data.data
}
MessAgeList()
// 就诊经验
const experience: any = ref([])
const ExperienceList = async () => {
  const res = await axios.get(`/api/v1/detaildoctor`)
  console.log(res.data.data)
  experience.value = res.data.data
}
ExperienceList()
</script>
<style lang="scss" scoped>
.detail {
  width: 100%;
  height: 100%;

  .box {
    width: 92%;
    height: 200%;
    margin: 0 auto;

    .box1 {
      width: 100%;
      height: 30px;
      display: flex;
      align-items: center;
      justify-content: space-between;
      font-size: 13px;

      p {
        color: #666;
      }

      .box1_1 {
        width: 100px;
        height: 25px;
        border: 1px solid blue;
        border-radius: 12px;
        display: flex;
        align-items: center;
        justify-content: center;

        img {
          width: 16px;
          height: 16px;
        }
      }
    }

    .box2 {
      width: 100%;
      height: 165px;
      position: relative;
      overflow: hidden;
      padding: 5px;
      border-radius: 10px;
      background-color: rgb(243, 248, 255);

      .box2_1 {
        width: 170px;
        height: 30px;

        .guanzhu {
          width: 60px;
          height: 23px;
          font-size: 12px;
          padding: 2px;
        }

        dl {
          display: flex;
          align-items: center;

          dt {
            font-size: 24px;
            font-weight: 600;
          }

          dd {
            margin-left: 20px;
            font-size: 15px;
          }
        }

        .box2_1_name {
          font-size: 0.45rem;
        }
      }

      .box2_2 {
        width: 70%;
        height: 80px;
        margin-top: 15px;
        font-size: 16px;

        p {
          margin-top: 5px;
        }

        .box2_2_p {
          display: flex;
          align-items: center;
          font-size: 12px;

          .jia {
            border: 1px solid red;
            font-size: 10px;
            padding: 1px 3px;

            span {
              width: 90px;
            }
          }
        }
      }

      .box2_3 {
        width: 90px;
        height: 90px;
        position: absolute;
        border-radius: 50%;
        right: 0;
        top: 10px;

        img {
          width: 100%;
          height: 100%;
          border-radius: 50%;
          position: relative;
        }

        p {
          width: 60px;
          height: 25px;
          position: absolute;
          text-align: center;
          bottom: 0;
          left: 14px;
          font-size: 14px;
          color: #fff;
          border-radius: 12px;
          background-color: rgb(11, 226, 11);

          img {
            width: 20px;
            height: 20px;
          }
        }
      }

      .box2_4 {
        width: 100%;
        height: 30px;
        display: flex;
        align-items: center;
        justify-content: space-between;

        dl {
          display: flex;
          align-items: center;
          font-size: 18px;
          font-weight: 600;

          dd {
            font-size: 12px;
          }
        }
      }

      .box2_5 {
        width: 100%;
        height: 70px;
        font-size: 14px;
      }
    }

    .box3 {
      width: 100%;
      height: 50px;
      margin: 20px 0;
      background: linear-gradient(to right, #ffe1b1, #dda95f);
      border-radius: 10px;
      display: flex;
      align-items: center;
      flex-wrap: wrap;
      justify-content: space-evenly;

      div {
        img {
          width: 17px;
          height: 17px;
        }

        font-size: 15px;
      }

      button {
        width: 70px;
        height: 30px;
        background-color: rgb(4, 4, 4);
        border: none;
        color: #fff;
        border-radius: 15px;
        font-size: 16px;
      }
    }

    .box4 {
      width: 100%;
      height: 35px;
      display: flex;
      align-items: center;
      justify-content: space-around;
      font-size: 13px;
      color: #666;

      dl {
        height: 100%;
        display: flex;
        align-items: center;
        line-height: 100%;

        dt {
          img {
            width: 25px;
            height: 20px;
          }
        }

        dd {
          font-size: 10px;
        }
      }
    }

    .box6 {
      width: 100%;
      height: 300px;
      overflow: hidden;

      h3 {
        width: 100%;
        font-size: 25px;
        height: 30px;
        line-height: 30px;

        span {
          font-size: 15px;
          color: #666;
        }

        .span1 {
          float: right;
        }
      }

      .box6_1 {


        dl {
          width: 100%;
          height: 100px;
          background-color: #ffffff;
          font-size: 12px;
          display: flex;


          dt {
            img {
              width: 50px;
              height: 50px;
            }

            p {
              margin-left: 10px;
              font-weight: 600;
              color: #666;
            }
          }

          dd {
            padding: 10px;
            border-bottom: 1px solid #ccc;
            
          }
        }
      }

      .box6_2 {
        width: 100%;
        height: 50px;
        background-color: red;
      }
    }
  }
}
</style>